<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格工具栏</title>
    <link href="../assets/css/dpl-min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/css/bui-min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/css/page-min.css" rel="stylesheet" type="text/css" />
</head>
<style type="text/css">
.edit-text{
      border: 1px solid red;
}
.bui-stdmod-body{/**内容超出 出现滚动条 **/
      overflow-x : auto;
      overflow-y : auto;
}
</style>
<body>
<div class="container">
    <div class="row header">
         <p>商品分类</p>  
         <span class="headBtn"><a href="addSort.html">添加分类</a></span>  
    </div>    
    <div class="row">
    <div id="grid"></div>
    <div id="bar" class=""></div>
</div>
</div>
<div id="c1" style="display:none">
      <form id="J_form" class="form-horizontal span12">     
          
               <table class="usertable usertable01" style="width:100%;">      
                  <tbody>
                    <tr>
                      <td>分类名称：</td>
                      <td><input type="text"></td>   
                    </tr>
                    <tr>
                      <td>上级分类：</td>
                      <td>
                        <select name="" id="">
                          <option value=""></option>
                          <option value=""></option>
                        </select>
                      </td>   
                    </tr>
                    <tr>
                      <td>排序：</td>
                      <td><input type="text" value=""></td>   
                    </tr>
                    <tr>
                      <td>是否显示：</td>
                      <td><input type="checkbox" /></td>   
                    </tr>
                    <tr>
                      <td>显示首页：</td>
                      <td><input type="checkbox"/></td>   
                    </tr>
                    <tr>
                      <td>属性：</td>
                      <td><input type="text" value=""></td>   
                    </tr>
                    <tr>
                      <td>分类标题：</td>
                      <td><input type="text" value=""></td>   
                    </tr>
                    <tr>
                      <td>分类关键字：</td>
                      <td><input type="text" value=""></td>   
                    </tr>
                    <tr>
                      <td>分类描述：</td>
                      <td><input type="text" value=""></td>   
                    </tr>
                  </tbody>
                </table>
    
        <div class="addsort_btn">
                 <span class="myspanBtn _btn">确定</span>
                 <span class="myspanBtn ">重置</span> 
        </div>
               
      </form>

    </div>
</div>

<!--t为时间戳-->
  <script type="text/javascript" src="../assets/js/jquery-1.8.1.min.js"></script>
  <script type="text/javascript" src="../assets/js/bui-min.js"></script>
  <script type="text/javascript" src="../assets/js/config-min.js"></script>
  <script type="text/javascript" src="../assets/js/myjs.js"></script>
  <script type="text/javascript">
    BUI.use('common/page');
  </script>

<!-- script 树状表格 start-->  
<script type="text/javascript">
        BUI.use(['bui/grid','bui/toolbar','bui/extensions/treegrid'],function (Grid,Toolbar,TreeGrid) {
    var PBar = Toolbar.PagingBar;//分页控件
      var data = [   //json传入数据部分
          {text : '1',
          id : '1',
          a:'a1',
          b:'false',
          c:'<input type="checkbox" checked="checked">',
          d:'d1',
          children: [
          {text : '11',
          id : '11',
          a:'a11',
          b:'false',
          c:'<input type="checkbox" checked="checked">',
          d:'d11'}
          ]},
          {text : '2',
          id : '2',
          a:'a2',
          b:'false',
          c:'<input type="checkbox" checked="checked">',
          d:'d2',
          expanded : true,
          children : [
              {text : '21',
              id : '21',
              a:'a21',
              b:'false',
          c:'<input type="checkbox" checked="checked">',
              d:'d21',
              children : [
              {text : '211',
              id : '211',
              a:'a211',
              b:'false',
              c:'<input type="checkbox" checked="checked">',
              d:'d211'
              },{text : '212',
              id : '212',
              a:'a212',
              b:'b212',
              c:'c212',
              d:'d212'
            }]},
              {text : '22',id : '22',a:'a22',b:'false',
          c:'<input type="checkbox" checked="checked">',d:'d22'}
          ]},
          {text : '3',id : '3',a:'a3',b:'false',
          c:'<input type="checkbox" checked="checked">',d:'d3'},
          {text : '4',id : '4',a:'a4',b:'false',
          c:'<input type="checkbox" checked="checked">',d:'d4'}
        ];

      //由于这个树，不显示根节点，所以可以不指定根节点
      var tree = new TreeGrid({
        render : '#grid',
        nodes : data,
        columns :  [
          {title:'分类名称',dataIndex:'id',width:150},
          {title:'商品数量',dataIndex:'a',width:200},
          {title:'是否显示',dataIndex:'b',width:100},
          {title:'显示首页',dataIndex:'c',width:100},
          {title:'排序',dataIndex:'d',width:100},
          {title:'操作',dataIndex:'',width:200,renderer : function(value,obj){
      
             var editStr = '<span class="grid-command" ><a href="transfergoods.html">[转移商品]</a></span>',
              editStr1 = '<span class="grid-command btn-edit" title="编辑商品信息">[编辑]</span>',
              delStr = '<span class="grid-command btn-del" title="删除商品信息">[移除]</span>';
            return editStr +  editStr1 + delStr;
          }}
        ]
      });   
        tree.render();
var bar = new PBar({  //分页插件
        render : '#bar',
        elCls : 'image-pbar', //应用图标分页栏的样式
        store : tree
});
bar.render();        
});
 </script>
<!-- script end -->
<!-- script 删除弹出框 start-->
<script type="text/javascript">
BUI.use('bui/overlay',function(Overlay){
var dialog = new Overlay.Dialog({
title:'删除商品信息',
width:150,
height:100,
bodyContent:'<p>确定删除？</p>',
success:function () {
alert('确认/后台在此操作？');
this.close();
}
})
$('.btn-del').live('click',function () {
dialog.show();
});
});
</script>
<!-- script 删除弹出框 end -->
<!-- script 编辑弹出框  start-->
<script type="text/javascript">
      BUI.use(['bui/overlay','bui/form'],function(Overlay,Form){
      var form = new Form.Form({
        srcNode : '#J_form'
      }).render();
      var dialog2 = new Overlay.Dialog({
            title:'编辑商品信息',
            width:600,
            height:300,
/*            mask:true,*/
            //配置DOM容器的编号
            contentId:'c1',
            success:function () {
              alert('确认/后台操作？');
              this.close();
            }
          });
        $('.btn-edit').live('click',function () {
          dialog2.show();
        });
      });
</script>
<!-- script 编辑弹出框  start-->

</body>
</html>